<template>
  <view >
    <!-- 卡密兑换 -->
    <tn-tabs-swiper :list="tabList" :isScroll="false" active-color="#FB4378" inactive-color="#666666" :current="indexTab" name="name" @change="clickTab"/>

    <view class="tn-padding">
      <!--  卡密兑换  -->
      <view v-if="indexTab == 0" >
        <view class="tn-flex tn-flex-row-center">
          输入兑换码或扫码兑换会员
        </view>
        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top">
          <tn-input v-model="key" placeholder="请输入卡密" :border="true" border-color="#D8D8D8" style="width: 100%"/>
          <text class="tn-icon-scan tn-text-xxl tn-margin-left-xs" style="color: #2979ff" @click="scancode"/>
        </view>
        <view class="tn-margin-top tn-flex tn-flex-col-center tn-flex-row-center">
          <tn-button :background-color="key.length==0?'#D8D8D8':'#FF3D71'" :font-color="key.length==0?'#7E7E7E':'#fff'" @click="exchange">兑换</tn-button>
        </view>
        <view>
          <u-gap height="100"/>
          <view class="explanation">兑换说明：</view>
          <view class="explanation">1.输入卡密可在本页面兑换会员，会员可免费看剧</view>
          <view class="explanation">2.卡密兑换后不可撤销</view>
        </view>
      </view>

      <!--  兑换记录  -->
      <view v-if="indexTab == 1">
        <view v-if="list.length==0">
          <u-empty mode="history" icon="/static/images/common/empty.svg" text="无兑换记录"/>
        </view>
        <view v-else>
          <view v-for="(item,index) in list" :key="index" >
            <view class="tn-bg-white tn-padding-xs dm-radius">
              <view class="tn-flex tn-flex-row-between tn-margin-bottom-xs">
                <text>【 {{ item.type | typeHandler }}】：{{ item._id }}</text>
                <u-tag :text="(item.type==4?'数量':'时长')+':'+item.duration" bg-color="#FFD3D3" color="#FB4378" size="mini"/>
              </view>
              <u-line/>
              <view class="tn-text-sm dm-color-gray1">
                兑换时间：{{item.used_time| date('yyyy-mm-dd hh:MM:ss')}}
                <text v-if="item.type!=4&&item.addunlockcard" style="margin-left: 20px;">附加解锁卡：{{item.addunlockcard}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

    </view>
    <banner-ad v-if="adConfig" :config="adConfig.wx_banner_cdkey"/>


  </view>
</template>

<script>
import BannerAd from "@/components/banner-ad/banner-ad.vue";
import UGap from "../../uni_modules/uview-ui/components/u-gap/u-gap.vue";
import {filters} from "../../libs/mixin/common_mixin";

export default {
  computed: {
    filters() {
      return filters
    }
  },
  components: {UGap, BannerAd},
  data() {
    return {
      tabList: [{name: '卡密兑换'}, {name: '兑换记录'}],
      key: "", //兑换码
      indexTab: 0,
      list: []
    }
  },
  filters: {
    typeHandler(type) {
      switch (type) {
        case 1:return '天卡';
        case 2:return '月卡';
        case 3:return '年卡';
        case 4:return '解锁卡';
        default:return '';
      }
    }
  },
  onShow() {

  },
  methods: {
    getUnit(type){
      switch (type) {
        case 1:return '天会员';
        case 2:return '月会员';
        case 3:return '年会员';
        case 4:return '全集解锁卡';
        default:return '';
      }
    },
    async exchange() {
      if (this.key.length==0){
        return
      }
      let data = await this.$api.exchangeCdkey({key: this.key});
      if (data.tip) {
        uni.showModal({
          title: "温馨提示",
          content: data.tip,
          showCancel: false,
          confirmText: "确认"
        })
        return;
      }
      let keyinfo = data.keyinfo.data[0];
      let unit = this.getUnit(keyinfo.type)
      uni.showModal({
        title: "兑换成功",
        content: "您已成功兑换" + keyinfo.duration + unit ,
        showCancel: false,
        confirmText: "确认",
        success: function(res) {
          if (res.confirm) {
            this.tn('/pages/Tabbar/my/my')
          }
        }
      })
    },
    scancode() {
      let that = this;
      // 允许从相机和相册扫码
      uni.scanCode({
        success: function(res) {
          that.key = res.result;
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);
        }
      });
    },
    async clickTab(index) {
      this.indexTab = index
      if (index == 1) {
        let res = await this.$api.getCdkeyExchangeHistory();
        this.list = res.list.data;
      }
    }
  }
}
</script>

<style>
.explanation {
  color: #888;
  font-size: 22rpx;
  line-height: 40rpx;
  margin-left: 20rpx;
}
</style>
